<template>
  <div id="ipadMini" v-if="data">
    <!-- --------------------------------一楼结构------------------------- -->
    <div class="f1" :class="{ scroll: scrollTop > 0 }">
      <div class="center">
        <div class="box">
          <p>iPad mini</p>
          <p>RMB {{ Math.ceil(ipadMini.getPrice() / 24) }}/月 (24 期)或RMB {{ipadMini.getPrice()}}</p>
        </div>
      </div>
    </div>
    <!-- --------------------------------二楼结构------------------------- -->
    <div class="f2">
      <div class="center">
        <div class="box">
          <p>符合条件的情况下可享免息分期付款。 进一步了解 ></p>
        </div>
      </div>
    </div>
    <!-- --------------------------------三楼结构------------------------- -->
    <div class="f3">
      <div class="center">
        <div class="box" :style="`height:${boxHeight}px`">
          <!-- 左边图片部分-->
          <div class="box1"
          :class="{
              scroll: scrollTop > 145 && scrollTop < boxHeight - 561,
              scroll1: scrollTop >= boxHeight - 561,
            }"
          >
            <div class="box1-1">
              <img :src="leftBig" />
            </div>
            <div class="box1-2">
              <div>
                <svg viewBox="0 0 35 35" width="35px" height="35px">
                  <path fill="none"></path>
                  <path
                    d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748v9.471a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-4.538 2.446l9.651 5.566-4.4 2.5-9.823-5.58c.038-.026.07-.059.111-.081zM7.788 23.539A1.5 1.5 0 017 22.219v-9.471a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                  ></path>
                </svg>
                <p>免费送货</p>
              </div>
              <div>
                <svg viewBox="0 0 35 35" width="35px" height="35px">
                  <rect width="35" height="35" fill="none"></rect>
                  <path
                    d="M17.5,6.1A11.4,11.4,0,1,1,6.1,17.5,11.41294,11.41294,0,0,1,17.5,6.1m0-1.1A12.5,12.5,0,1,0,30,17.5,12.5,12.5,0,0,0,17.5,5Z"
                  ></path>
                  <path
                    d="M9.0498,19.6626a.51614.51614,0,0,1,.65821-.541A25.70105,25.70105,0,0,0,17.4873,20.3208a25.68829,25.68829,0,0,0,7.77735-1.19922.52156.52156,0,0,1,.66015.541,8.34671,8.34671,0,0,1-8.4375,7.35547A8.35447,8.35447,0,0,1,9.0498,19.6626Zm15.2129,2.584a7.008,7.008,0,0,0,.73828-2.14941,26.8936,26.8936,0,0,1-7.51368,1.06738,26.91758,26.91758,0,0,1-7.51562-1.06738A7.086,7.086,0,0,0,10.71,22.24658a22.4677,22.4677,0,0,0,6.77734,1.041A22.45514,22.45514,0,0,0,24.2627,22.24658ZM12.332,14.74463a1.64578,1.64578,0,0,1,1.48926-1.75391,1.64676,1.64676,0,0,1,1.50391,1.75391,1.659,1.659,0,0,1-1.50391,1.7666A1.65823,1.65823,0,0,1,12.332,14.74463Zm7.31738,0A1.647,1.647,0,0,1,21.165,12.99072a1.64583,1.64583,0,0,1,1.49023,1.75391,1.65827,1.65827,0,0,1-1.49023,1.7666A1.65918,1.65918,0,0,1,19.64941,14.74463Z"
                  ></path>
                </svg>
                <p>免费个性化镌刻服务</p>
              </div>
              <div>
                <svg viewBox="0 0 35 35" width="35px" height="35px">
                  <path fill="none" d="M0 0h35v35H0z"></path>
                  <path
                    d="M12.249 9.022l-4.461 2.4c-.041.022-.073.055-.111.081l9.823 5.588 4.4-2.5zM27.322 11.507c-.038-.025-.069-.058-.11-.081l-9-4.852a1.5 1.5 0 00-1.424 0l-3.5 1.889 9.628 5.55zM10.8 18.5a.5.5 0 01-.5.5H7v3.219a1.5 1.5 0 00.788 1.32l9 4.852a1.494 1.494 0 00.212.082V17.957l-9.931-5.645a1.494 1.494 0 00-.069.436V18h3.3a.5.5 0 01.5.5zM18 17.957v10.515a1.481 1.481 0 00.212-.082l9-4.851a1.5 1.5 0 00.788-1.32v-9.471a1.5 1.5 0 00-.069-.436z"
                    fill="none"
                  ></path>
                  <path
                    d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748V17h1v-4.252a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082l-9-4.852A1.5 1.5 0 017 22.219V20H6v2.219a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-9.11 4.932c.038-.026.07-.059.111-.081l4.461-2.4 9.651 5.561-4.4 2.5zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                  ></path>
                  <path
                    d="M2.507 18l1.646-1.646a.5.5 0 00-.707-.707l-2.5 2.5a.5.5 0 000 .707l2.5 2.5a.5.5 0 10.707-.707L2.507 19H6v-1zM10.3 19a.5.5 0 000-1H7v1zM6 18h1v1H6z"
                  ></path>
                </svg>
                <p>简单免费的退货服务</p>
              </div>
            </div>
          </div>
          <!-- 右边样式选择部分 -->
          <div class="box2"
          id="box2Content">
            <!-- 大标题部分 -->
            <div class="box2-1">
              <h2>购买 iPad mini</h2>
            </div>
            <!-- 外观部分 -->
            <div class="box2-2" v-if="data">
              <h4 style="margin-bottom: 20px">外观</h4>
              <div class="box2-2-1" :class="{ hidden: waiguan_titlenow >= 0 }">
                <div
                  class="pointer"
                  v-for="(waiguan, i) in data.wg"
                  :class="{ active: waiguan_now == i }"
                  :key="waiguan.wid"
                  @click="GBwaiguan(waiguan, i)"
                >
                  <img :src="waiguan.wgImg" />
                  <p>{{ waiguan.color }}</p>
                </div>
              </div>

              <div class="title" :class="{ hidden: waiguan_titlenow < 0 }">
                <p>{{ ipadMini.appear.title }}</p>
                <a @click="titleWaiguan">修改</a>
              </div>
            </div>
            <!-- 存储部分 -->
            <div class="box2-3" v-if="data">
              <h4>存储</h4>
              <div class="text1 pointer">
                <p class="pointer">
                  提前做准备,为以后的需要留足空间。你的 iPad mini
                  容量越大,用来存储数字内容的空间就越多,选择时既要满足现在,要考虑将来的需求。
                </p>
              </div>
              <div class="box2-3-2" :class="{ hidden: cunchu_titlenow >= 0 }">
                <div
                  class="pointer"
                  :class="{ active: cunchu_now == i }"
                  v-for="(neicun, i) in data.cc"
                  :key="neicun.cid"
                  @click="GBcunchu(neicun, i)"
                >
                  <div class="text">
                    <span>{{ neicun.cunchu }}<sup>1</sup></span>
                  </div>
                  <p>RMB {{ Math.ceil((3799 + neicun.price) / 24) }}/月或</p>
                  <p>RMB {{ 3799 + neicun.price }}起</p>
                </div>
              </div>
              <div class="title" :class="{ hidden: cunchu_titlenow < 0 }">
                <p>{{ ipadMini.memory.title }}<sup>1</sup></p>
                <a @click="titleCunchu">修改</a>
              </div>
            </div>
            <!--连接部分  -->
            <div class="box2-4" v-if="data">
              <h4>连接</h4>
              <div class="text1 pointer">
                <p class="pointer">
                  两种高速连接方式,处处连线都方便。每部 iPad
                  都能连接无线局域网。没有可用的无线局域网时,无线局域网 +
                  蜂窝网络机型依然能让你时时保持在线。
                </p>
              </div>
              <div class="box2-4-1">
                <div
                  class="pointer"
                  :class="{
                    active: lianjie_now == i,
                    hidden: lianjie_titlenow >= 0,
                  }"
                  v-for="(lianjie, i) in data.lj"
                  :key="lianjie.lid"
                  @click="GBlianjie(lianjie, i)"
                >
                  <h4>{{ lianjie.lianjie }}</h4>
                  <p>RMB {{ Math.ceil((3799 + lianjie.price) / 24) }}/月 或</p>
                  <p>RMB {{ 3799 + lianjie.price }}</p>
                </div>
              </div>
              <div class="title" :class="{ hidden: lianjie_titlenow < 0 }">
                <p>{{ ipadMini.connect.title }}</p>
                <a @click="titleLianjie">修改</a>
              </div>
            </div>
            <!--右边购买添加购物袋页面  -->
            <div class="box2-5" v-if="data">
              <div class="box2-5-1">
                <h2>
                  RMB {{ Math.ceil(ipadMini.getPrice() / 24) }}/月 (24 期)
                </h2>
                <p>或</p>
                <h2>{{ ipadMini.getPrice() }}</h2>
                <p>含增值税及其他法定税费：约 RMB 517。</p>
                <p>可享免息分期付款</p>
              </div>
              <div class="box2-5-2">
                <h4>{{ ipadMini.info.title }}</h4>
                <div>
                  <img src="../assets/YYT_IMG/ipad-one.png" />
                  <div>
                    <p>预计发货日期：</p>
                    <p>1-2 周</p>
                    <p>免费送货</p>
                    <a href="#">查看送货日期</a>
                  </div>
                </div>
                <div>
                  <img src="../assets/YYT_IMG/ipad-two.png" />
                  <div>
                    <p>取货：</p>
                    <a href="#">查看供货情况</a>
                  </div>
                </div>
              </div>
              <button
                @click="addToShopBag"
                :class="{
                  opac: lianjie_now >= 0 && waiguan_now >= 0 && cunchu_now >= 0,
                }"
              >
                添加购物袋
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <msg-mask ref="msgMaskbtn" />
    <!------------------- 四楼结构------------------------- -->
    <div class="f4">
      <div class="center">
        <div class="box">
          <h2>包装内容</h2>
          <div class="box1">
            <div>
              <div class="box1-1">
                <img :src="baoZT" />
              </div>
              <p>{{ baoXingHao }}</p>
            </div>
            <div>
              <div>
                <img :src="data.usbImg[1].usb" />
              </div>
              <p>{{ data.usbImg[1].mingcheng }}</p>
            </div>
            <div>
              <div>
                <img :src="data.usbImg[2].usb20" />
              </div>
              <p>{{ data.usbImg[2].mingcheng20 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ------------------------五楼结构 ------------------------------------->
    <div class="f5 gongxiang">
      <div class="center">
        <div class="f5-1">
          <div class="box1">
            <p>iPad 机型比较</p>
          </div>
          <ipad-zu />
          <div class="box3">
            <a href="#">比较各款 iPad 机型 > </a>
            <a href="#">选购 iPad > </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import IpadZu from "@/components/IpadZu.vue";
import Products from "@/plugins/Product";
import MsgMask from "@/components/MsgMask.vue";
export default {
  components: { IpadZu, MsgMask },
  data() {
    return {
      data: null,
      leftBig: "",
      baoZT: "",
      ipadMini: {},
      baoXingHao: "",
      waiguan_now: -1,
      waiguan_titlenow: -1,
      cunchu_now: -1,
      cunchu_titlenow: -1,
      lianjie_now: -1,
      lianjie_titlenow: -1,
      scrollTop: null,
      boxHeight: 1652.5,
      userBagData: null,
    };
  },
  mounted() {
    this.getData();
    window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮滚动事件
  },

  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/product/4";
      axios.get(url).then(res => {
        console.log(res);
        this.ipadMini = new Products.Ipad(4, "ipad Mini");
        this.data = res.data;
        this.leftBig = res.data.bigTitleImg;
        this.baoZT = res.data.usbImg[0].sImg[0];
        this.baoXingHao = res.data.toListTitle;
        return res;
      });
    },
    GBwaiguan(e, i) {
      this.waiguan_now = i;
      this.waiguan_titlenow = i;
      this.ipadMini.setAppear(e);
      this.leftBig = this.data.bigImg[this.waiguan_now];
      this.baoZT = this.data.usbImg[0].sImg[this.waiguan_now];
      console.log(this.ipadMini.getAllTitle(), this.ipadMini.getPrice());
    },
    GBcunchu(e, i) {
      this.cunchu_now = i;
      this.cunchu_titlenow = i;
      this.ipadMini.setMemory(e);
      console.log(this.ipadMini.getAllTitle(), this.ipadMini.getPrice());
    },
    GBlianjie(e, i) {
      this.lianjie_now = i;
      this.lianjie_titlenow = i;
      this.ipadMini.setConnect(e);
      console.log(this.ipadMini.getAllTitle(), this.ipadMini.getPrice());
    },
    titleWaiguan() {
      this.waiguan_titlenow = -1;
    },
    titleCunchu() {
      this.cunchu_titlenow = -1;
    },
    titleLianjie() {
      this.lianjie_titlenow = -1;
    },
    addToShopBag() {
      let user = sessionStorage.getItem("user");
      console.log(user);
      //判断是否选择了商品
      if (this.lianjie_now < 0 || this.cunchu_now < 0 || this.waiguan_now < 0) {
        return;
      }
      // 判断是否登录，否则就直接返回到登录页面
      if (user == "" || !user) {
        this.$refs.msgMaskbtn.setInformation({
          title: "未登录",
          btnTitle: "去登陆",
          callback() {
            this.$router.push("/login");
          },
        });
        this.$refs.msgMaskbtn.showbtnMask();
        return;
      }

      //解析json字符串为js对象
      user = JSON.parse(user);
      let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
      axios.get(userurl).then(res => {
        console.log(res.data);
        this.userBagData = res.data;

        let seemProduct = this.checkProductNum('ipad Mini' +  this.ipadMini.getAllTitle());

        //商品在数据库里的数量如果不等于空
        //就代表着有重复着的数据
        if (seemProduct != null) {
          let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
          seemProduct.num += 1;
          // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
          // 另外需要将对象里的num数量+1
          axios.put(url2, seemProduct).then(res => {
            // console.log(res.data)
            this.$refs.msgMaskbtn.setInformation({
              title: "添加商品成功",
            });
            this.$refs.msgMaskbtn.showbtnMask();
          });
        } else {
          //这里是没找到重复商品的操作
          //正常的添加操作 post
          let url = `http://localhost:3000/user/${user.id}/shopBagList`;
          axios
            .post(url, {
              title: 'ipad Mini' + this.ipadMini.getAllTitle(),
              price: this.ipadMini.getPrice(),
              img: this.data.buyImg[this.waiguan_now],
              num: 1, //默认的参数 已添加为1
              //post的参数是一个对象，里面只接受四个参数
            })
            .then(res => {
              this.$refs.msgMaskbtn.setInformation({
                title: "添加商品成功",
              });
              this.$refs.msgMaskbtn.showbtnMask();
            });
        }
      });
    },

    checkProductNum(proTitle) {
      //检查用户列表下的商品数量
      //返回值 重复的商品对象
      //参数，需要进行检查的商品标题
      for (const e of this.userBagData) {
        if (e.title == proTitle) {
          return e;
        }
      }
      return null;
    },

    handleScroll() {
      //这个滚动函数是声明在window里的，也就是说，其他人的页面也会有这个滚动函数，
      //但是并没有ipadpro里的各种对象，所以会报错，
      //故加一个if判断，当路由的路径是ipadPro时，才会运行这段代码
      // console.log(this.$route.path)
      let box2 = document.getElementById("box2Content");
      if (this.$route.path == "/ipadMini" && this.data && box2) {
        this.scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        this.boxHeight = parseInt(getComputedStyle(box2, null)["height"]);
      }
    },
  },
};
</script>

<style lang="less" scoped>
#ipadMini {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src="../assets/css/ipadMini.css"></style>
